<template>
  <div>
    <el-card>
      <!-- 添加角色按钮 -->
       <el-row>
          <el-col class="add">
            <el-button type="primary" @click="add()">添加角色</el-button>
          </el-col>
       </el-row>

       <!-- 角色列表 -->
       <el-table :data="rolelist" border stripe>
        <!-- 展开列 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
                
                <!-- <pre>
                   {{ scope.row }}   
                </pre> -->
            </template>
          </el-table-column>
        <!-- 索引列 -->
          <el-table-column type="index"></el-table-column>
          <el-table-column label="角色名称" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column label="操作" width="300px">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row,scope.$index)">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.$index)">删除</el-button>
                <el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
              </template>
          </el-table-column>
      </el-table> 
    </el-card>
    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="50%">
      <el-form
        
        :model="userData"
        ref="refForm"
        label-width="70px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="userData.roleName"></el-input>
        </el-form-item>
        
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="userData.roleDesc"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>

import api from "../../api/index";
// import { ajax } from "../../api/ajax";

export default{
  name: 'roles',
  components: {},
  data(){
    return {
        keyword: 0,
        selected: 0,
        rolelist:[],
        dialogVisible: false,
        userData: {
          roleName: "",
          roleDesc: ""
        }
    }
  },
  created() {
    api.set.getRolesData().then((res) => {
      this.rolelist = res.data;
      console.log(res);
    });
  },
  methods: {
    add() {
      this.userData={};
      this.keyword = 0;
      this.dialogVisible = !this.dialogVisible;
     
    },
    edit(item,index) {
      
      // this.userData.roleName = item.roleName;
      // this.userData.roleDesc = item.roleDesc;
      this.userData= {
        ...item
      };
      this.keyword = 1;
      this.selected = index;
      console.log(index);
      this.dialogVisible = !this.dialogVisible;
    },

    del(index) {
      this.rolelist.splice(index,1);
      console.log(index);
    },

    handleConfirm() {
      if(this.keyword === 0) {
        this.rolelist.push(this.userData)
      } else {
        this.$set(this.rolelist, this.selected, this.userData)
        // this.rolelist[this.selected] = {
        //   ...this.userData
        // }
        
      };
      this.dialogVisible = !this.dialogVisible;
      // this.userData=this.rolelist[this.selected];
      console.log(this.rolelist);
    },
    handleCancel() {
      this.dialogVisible = !this.dialogVisible;
      this.$refs.refForm.resetFields();
    },


    
    
  
  }
};
</script>

<style scoped lang='less'>
.el-tag {
  margin: 7px;
}

.add{
  margin-bottom: 20px;
}
</style>